<template>
  <div class="typeSelect clearfix">
    <div class="select_box">
      <div class="select_text" id="" @click="isShow()">{{firstName}}</div>
      <ul class="select_ul" v-show="isShow_first">
        <li v-for="item in typeList" :key="item.id" v-on:click='selectfirstLevel(item)'>{{item.fieldName}}</li>
      </ul>
    </div>
    <div class="select_box">
      <div class="select_text" value="" id="" @click="isShow2()">{{secondName}}</div>
      <ul class="select_ul" v-show="isShow_second">
        <li v-for="item in second_list" :key="item.id" v-on:click='selectsecondLevel(item)'>{{item.fieldName}}</li>
      </ul>
    </div>
  </div>
</template>
<style >
.select_box {
  width: 48%;
  position: relative;
  margin: 1%;
  padding: 0;
  float: left;
}

.select_box .select_text {
  cursor: pointer;
  height: 0.35rem;
  line-height: 0.35rem;
  border: 1px solid #1980ff;
  border-radius: 0.2rem;
  color: #000;
  font-size: 0.13rem;
  background-color: #f4f8ff;
  padding: 0 0.1rem;
  /* background: url(select_input_bg.gif) no-repeat 160px center; */
}
.select_box ul {
  position: absolute;
  left: 0;
  top: 0.4rem;
  padding: 0 0.1rem;
  background: #fff;
  overflow: hidden;
  z-index: 99999;
  text-align: left;
  width: 90%;
  height: 2.8rem;
  overflow-y: scroll;
  border-radius: 0.02rem;
}
.select_box ul li {
  display: block;
  overflow: hidden;
  width: 100%;
  cursor: pointer;
  margin: 0.25rem 0;
}
.hover {
  background: #ccc;
}
</style>
<script>
export default {
  name: 'TypeSelect',
  data () {
    return {
      isShow_first: false,
      isShow_second: false
    }
  },
  props: {
    typeList: {
      type: Array,
      default: () => []
    },
    second_list: {
      type: Array,
      default: () => []
    },
    firstName: String,
    secondName: String,
  },
  methods: {
    isShow: function () {
      this.isShow_first = !this.isShow_first
    },
    isShow2: function () {
      this.isShow_second = !this.isShow_second
    },
    selectfirstLevel: function (item) {
      this.$emit('receivefirst', item)
      this.isShow_first = !this.isShow_first
    },
    selectsecondLevel: function (item) {
      this.$emit('receivesecond', item)
      this.isShow_second = !this.isShow_second
    },

  }
}
</script>
<style>
</style>